<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品首页</title>
    <link rel="stylesheet" href="css/shop_show.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eeeeee;
        }

        .navbar-text a {
            color: #ffffff;
            padding-right: 10px;
        }

        .login-text {
            margin-right: 50px;
        }

        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }

        .search-box {
            height: 48px;
        }

        #ssl {
            height: 48px;
        }

        .input-group-addon {
            background-color: #E94F4C;
            border: none;
            color: #ffffff;
        }

        .control-icon {
            position: absolute;
            top: 50%;
        }

        .mgt38 {
            margin-top: 30px;
        }

        .thumbnail a img {
            height: 200px;
            width: 200px;
        }

        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }

        a:hover {
            text-decoration: none;
        }

        h3,
        p {
            text-align: center;
        }

        .dropdown {
            margin: 8px;
            float: right;
            display: none;
        }

        #dropdownMenu1 {
            border: none;
            background-color: #222;
            color: #FFFFFF;
        }

        .dropdown-menu {
            text-align: center;
        }

        .dropdown-menu > li > a > i {
            float: left;
            margin-left: 10px;
        }

        .login {
            display: block;
        }
    /*客服*/
        .modal-header {
            text-align: center;
        }

        .modal-header>button {
            float: left;
        }

        .modal-header i {
            margin-right: 10px;
            color: crimson;
        }

        #chat_room {
            height: 400px;
            margin-top: 10px;
            overflow: auto;
        }

        #chatText {
            border: 0;
            border-radius: 5px;
            background-color: rgba(241, 241, 241, .98);
            height: 100px;
            padding: 10px;
            margin-bottom: 10px;
            resize: none;
        }
        #message {
            padding-inline-start: 0;
        }
        #message>li {
            list-style-type: none;
            margin: 4px 0;
        }
        .she {
            text-align: left;
        }
        .me {
            text-align: right;
        }
        .she span {
            text-align: center;
            margin: 2px 4px;
            padding: 10px 4px;
            background-color: pink;
            border-radius: 50%;
            color: #FFFFFF;
        }
        .she p {
            padding: 5px;
            display: inline-block;
            background-color: #07C160;
            border-radius: 10px 10px 10px 0;
            color: #FFFFFF;
        }
        .me span {
            text-align: center;
            margin: 2px 4px;
            padding: 10px 11px;
            background-color: skyblue;
            border-radius: 50%;
            color: #FFFFFF;
        }
        .me p {
            padding: 5px;
            display: inline-block;
            background-color: #07C160;
            border-radius: 10px 10px 0 10px;
            color: #FFFFFF;
        }
        #csBtn {
            position: fixed;
            bottom: 500px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="shop_show.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-space-shuttle"></i>火箭速购</a>
        </div>
        <div class="navbar-right" id="login">
            <p class="navbar-text">
                <a href="login.jsp">登录</a>
            </p>
            <p class="navbar-text">
                <a href="register.html">注册</a>
            </p>
        </div>
        <div class="dropdown" id="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                欢迎你，<span>{{username}}</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="shop-cart.html"><i class="fa fa-shopping-cart"></i>我的购物车</a></li>
                <li><a href="order.html"><i class="fa fa-shopping-basket"></i>我的订单</a></li>
                <li><a href="login.jsp" onclick="quit()"><i class="fa fa-exchange"></i>切换账号</a></li>
                <li><a href="javascript:void(0)" onclick="quit()"><i class="fa fa-sign-out"></i>退出登录</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-1 search-box">
            <a href="shop_show.html" class="logo">
                <i class="fa fa-space-shuttle"></i>
            </a>
        </div>
        <div class="col-xs-9 search-box">
            <div class="input-group search-box">
                <input class="form-control search-box" id="ssl" type="text">
                <span class="input-group-addon">
							<i class="fa fa-search"></i>
						</span>
            </div>
        </div>
        <div class="col-xs-2 search-box">
            <a href="shop-cart.html" class="btn btn-danger btn-block search-box">
                <i class="fa fa-cart-arrow-down" style="font-size: 20px;"></i>&nbsp;&nbsp;购物车
                <!-- 购物车数据的数量 -->
                <span id="shoppingCartNum" class="badge">0</span>
            </a>
        </div>
    </div>
    <div class="row">
        <div id="carousel-example" class="carousel slide mgt38" data-ride="carousel">
            <!-- 小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example" data-slide-to="1"></li>
                <li data-target="#carousel-example" data-slide-to="2"></li>
                <li data-target="#carousel-example" data-slide-to="4"></li>
            </ol>
            <!-- 放置图片 -->
            <div class="carousel-inner">

                <!-- 展示每张图片以及文字 -->
                <div class="item active">
                    <img src="images/banner/banner1.webp">
                </div>
                <div class="item">
                    <img src="images/banner/banner2.webp">
                </div>
                <div class="item">
                    <img src="images/banner/banner3.webp">
                </div>
                <div class="item">
                    <img src="images/banner/banner4.jpg">
                </div>
            </div>

            <!-- 左边的箭头 -->
            <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                <span class="fa fa-chevron-left control-icon"></span>
                <span class="sr-only">Previous</span>
            </a>
            <!-- 右边的箭头 -->
            <a class="right carousel-control" href="#carousel-example" data-slide="next">
                <span class="fa fa-chevron-right control-icon"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="row mgt38" id="goodsListInfo">
        <div class="col-xs-3" v-for="good in goodList">
            <div class="thumbnail">
                <a href="javascript: void(0);">
                    <img :src="good.smallPic">
                    <div class="caption">
                        <p class="description">
                            {{good.title}}
                        </p>
                        <p>
                            价格：￥{{good.price}}
                        </p>
                        <p>
                            <button :id="good.goodId" onclick="addToShoppingCart(this)" class="btn btn-danger">加入购物车
                            </button>
                        </p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<button id="csBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    联系客服
</button>
<div id="cs">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&larr;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><i class="fa fa-space-shuttle"></i>火箭速购（客服人员）</h4>
                </div>
                <div class="modal-body">
                    <div id="chat_room">
                        <ul id="message">
                            <!-- <li><div class="she"><span>客服</span><p>你好吗</p></div></li>
                            <li><div class="me"><p>我还好</p><span>我</span></div></li> -->
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <div id="chat_out">
                        <textarea id="chatText" class="form-control" placeholder="和客服小姐姐聊聊天吧..." ;></textarea>
                        <button type="button" class="btn btn-primary" id="chatOut" onclick="send()">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#goodsListInfo',
        data: {
            goodList: []
        },
        code: 0
    });
    var vm2 = new Vue({
        el: '#dropdown',
        data: {
            username: null
        },
    });

    //判断是否登录的用户
    $(function () {
        $.ajax({
            url: 'http://localhost:8080/loginUser',
            type: 'get',
            dataType: 'json',
            data: {
                method: "login"
            },
            success: function (_data) {
                console.log(_data);
                // 如果用户登录
                code = _data.code;
                vm2.username = _data.username;
                if (code == 2) {
                    $('#login').css('display', 'none')
                    $('#dropdown').css('display', 'block')
                }
            }
        })
    });

    //退出登录
    function quit() {
        $.ajax({
            url: 'http://localhost:8080/loginUser',
            type: 'get',
            dataType: 'json',
            data: {
                method: "quit"
            }
        });
        localStorage.removeItem('local_shopping_cart');
        location.reload();
    }

    //获取数据库商品列表
    $.ajax({
        url: 'http://localhost:8080/query',
        type: 'post',
        dataType: 'json',
        success: function (_data) {
            console.log(_data);
            renderGoodsInfo(_data);
        }
    });

    //json转数组
    function renderGoodsInfo(goods) {
        for (var i = 0; i < goods.length; i++) {
            vm.goodList.push(goods[i]);
        }
    }

    /**
     * 加入购物车
     */
    function addToShoppingCart(btnTag) {
        //获取商品ID
        var goodId = $(btnTag).prop('id');
        console.log(goodId);
        //如果等于2的情况下就是登录了的，那么就直接插入mysql购物车表
        if (code == 2) {
            $.ajax({
                url: 'cart/addGood',
                type: 'post',
                dataType: 'json',
                data: {
                    goodId: goodId
                }
            })
            //登录的用户添加购物车也要存储在本地
            shoppingCart2LocalStorage(goodId);
        } else {
            //没登录的用户存储在本地LocalStorage
            shoppingCart2LocalStorage(goodId);
        }
    }

    // 购物车数据的本地存储LI
    function shoppingCart2LocalStorage(goodId) {
        //取得已经存在于本地的购物车数据, 取出的数据也是一个字符串
        var shoppingCart = localStorage.getItem('local_shopping_cart');
        //将goodId转换为字符串
        goodId = '' + goodId;
        //表示本地没有数据
        if (!shoppingCart) {
            shoppingCart = {}; // 重新复制
            shoppingCart[goodId] = 1;
            $('#shoppingCartNum').html(1); // 小圆点的数字
            localStorage.setItem('local_shopping_cart', JSON.stringify(shoppingCart));
        } else {
            //将字符串转换为js的对象
            shoppingCart = JSON.parse(shoppingCart);
            //返回一个数组，数组中就是所有的商品的id ['1001', '1002', '1003']
            var goodIds = Object.keys(shoppingCart);
            //判断商品是否已经存在
            if (goodIds.indexOf(goodId) != -1) {
                //存在数量 +1
                shoppingCart[goodId]++;
            } else {
                //不存在新增1商品
                shoppingCart[goodId] = 1;
            }
            //购物车计数变化
            countShoppingCartNum(shoppingCart);
            //本地存储新的购物车信息
            localStorage.setItem('local_shopping_cart', JSON.stringify(shoppingCart));
        }
    }

    //购物车初始化
    countShoppingCartNum(JSON.parse(localStorage.getItem('local_shopping_cart')));

    //购物车数据加载
    function countShoppingCartNum(localShoppingCart) {
        //判断购物车是否存在数据
        console.log(goodsId)
        if (localShoppingCart) {
            //获取商品ID数组
            console.log(console.log(goodsId))
            var goodIds = Object.keys(localShoppingCart);
            var num = 0;
            //遍历商品id，根据id回去购物车对应商品的数量，累加进num
            for (var i = 0; i < goodIds.length; i++) {
                num += localShoppingCart[goodIds[i]];
            }
            //购物车按钮小圆点显示
            $('#shoppingCartNum').html(num);
        }
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false // 不要音频
        })
    }
    // //联系客服
    // var websocket = null;
    // //判断当前浏览器是否支持WebSocket
    // if ('WebSocket' in window) {
    //     websocket = new WebSocket("ws://localhost:8887");
    // } else {
    //     alert('当前浏览器 Not support websocket')
    // }
    // //连接发生错误的回调方法
    // websocket.onerror = function() {
    //     setMessageInnerHTML("WebSocket连接发生错误");
    // };
    // //连接成功建立的回调方法
    // websocket.onopen = function() {
    //     // 连接成功，注册自己
    //     websocket.send("register|" + new Date().getTime());
    // }
    // //接收到消息的回调方法
    // websocket.onmessage = function(event) {
    //     setMessageInnerHTML(event.data);
    // }
    // //连接关闭的回调方法
    // websocket.onclose = function() {
    //     setMessageInnerHTML("WebSocket连接关闭");
    // }
    // //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    // window.onbeforeunload = function() {
    //     closeWebSocket();
    // }
    // //将消息显示在网页上
    // function setMessageInnerHTML(innerHTML) {
    //     var contents = innerHTML.split("|");
    //     $('#message').append("<li><div class='she'><span>客服</span><p>" + contents[2] + "</p></div></li>");
    // }
    // //关闭WebSocket连接
    // function closeWebSocket() {
    //     websocket.close();
    // }
    //发送消息
    // function send() {
    //     var message = $('#chatText').val();
    //     $('#message').append("<li><div class='me'><p>" + message + "</p><span>我</span></div></li>");
    //     websocket.send("chat|admin|" + message);
    //     $('#chatText').val('');
    // }
</script>
</html>
